<!--
 * @Date: 2025-07-29 23:00:36
 * @LastEditors: 贾二小 erxiao.jia@outlook.com
 * @LastEditTime: 2025-10-02 00:09:38
 * @FilePath: /admin-vue/src/layouts/modules/global-header/components/user-avatar.vue
-->
<script setup lang="ts">
import { computed } from 'vue'
import type { VNode } from 'vue'
import { $t } from '@/locales'
import router from '@/plugins/router'

defineOptions({
  name: 'UserAvatar',
})

const { SvgIconVNode } = useSvgIcon()

type DropdownKey = 'logout' | 'user-center'

type DropdownOption =
  | {
      key: DropdownKey
      label: string
      icon?: () => VNode
    }
  | {
      type: 'divider'
      key: string
    }

const options = computed(() => {
  const opts: DropdownOption[] = [
    {
      label: $t('common.userCenter'),
      key: 'user-center',
      icon: SvgIconVNode({ icon: 'ph:user', fontSize: 18 }),
    },
    {
      label: $t('common.logout'),
      key: 'logout',
      icon: SvgIconVNode({ icon: 'ph:sign-out', fontSize: 18 }),
    },
  ]

  return opts
})

function handleDropdown(key: DropdownKey) {
  if (key === 'logout') {
    logout()
  } else if (key === 'user-center') {
    router.push({ name: 'admin.system.user-center' })
  }
}

function logout() {
  window.$dialog?.info({
    title: $t('common.tip'),
    content: $t('common.logoutConfirm'),
    positiveText: $t('common.confirm'),
    negativeText: $t('common.cancel'),
    onPositiveClick: () => {
      useAuth().logout()
    },
  })
}

const userStore = useUserStore()
</script>

<template>
  <NDropdown placement="bottom" trigger="click" :options="options" @select="handleDropdown">
    <div>
      <ButtonIcon>
        <SvgIcon icon="ph:user-circle" class="text-icon-large" />
        <span class="text-16px font-medium">{{ userStore.info?.real_name }}</span>
      </ButtonIcon>
    </div>
  </NDropdown>
</template>

<style scoped></style>
